<template>
  <div class="card info-box" v-if="gameList.length > 0">
    <div class="u-font-bold u-m-b-10 u-m-l-4 u-text-left u-font-14">
      我的关注
    </div>
    <van-cell-group>
      <van-cell
        class="u-flex u-col-center"
        v-for="item in gameList"
        :key="item.match_id"
        @click="handleToMatch(item.match_id)"
      >
        <template #title>
          <van-row justify="space-between" align="center" style="height:100%">
            <van-col class="u-text-left" span="4">
              <van-image
                round
                height="36"
                width="36"
                fit="cover"
                :src="item.avatarfull"
              ></van-image>
            </van-col>
            <van-col span="8" class="u-line-1">
              <div class="u-flex u-flex-col u-col-top u-row-between u-font-12">
                <div class="u-m-b-8">{{ item.personaname || "匿名玩家" }}</div>
                <div class="u-flex">
                  <div
                    class="u-m-r-4"
                    :class="
                      isWin(item.player_slot, item.radiant_win)
                        ? 'radiant'
                        : 'dire'
                    "
                  >
                    {{
                      isWin(item.player_slot, item.radiant_win)
                        ? "胜利"
                        : "失败"
                    }}
                  </div>
                  <div class="u-tips-color">
                    {{ formatStartTime(item.start_time) }}
                  </div>
                </div>
              </div>
            </van-col>
            <van-col span="4" class="u-line-1">
              <div
                class="u-flex u-flex-col u-col-center u-row-between u-font-12"
              >
                <div class="u-m-b-8 u-tips-color">
                  {{ getPartSize(item.party_size) }}
                </div>
                <div
                  :class="
                    getLobbyType(item.lobby_type) === '天梯'
                      ? 'u-type-error'
                      : ''
                  "
                >
                  {{ getLobbyType(item.lobby_type) }}
                </div>
              </div>
            </van-col>
            <van-col class="u-line-1 u-p-r-10" span="8">
              <div
                class="u-flex u-flex-col u-col-bottom u-row-between u-font-12"
              >
                <div
                  :class="getSkillColor(getSkillLevel(item.skill))"
                  class="u-m-b-8"
                >
                  {{ getSkillLevel(item.skill) }}
                </div>
                <div class="u-tips-color">
                  {{ `${item.kills}/${item.deaths}/${item.assists}` }}
                </div>
              </div>
            </van-col>
          </van-row>
        </template>
        <template #right-icon>
          <van-image
            height="32"
            width="54"
            fit="cover"
            :src="getHeroAvatar(item.hero_id)"
          ></van-image>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>
<script setup>
import { computed, onMounted, ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { getPlayerRecentMatches, getPlayers } from "@/api/player.js";
import {
  getHeroAvatar,
  isWin,
  getSkillLevel,
  formatStartTime,
  getPartSize,
  getLobbyType,
} from "@/utils/dotaHelper";
const store = useStore();
const router = useRouter();
const followerList = computed(() => {
  return (
    store.getters.followerList.find((item) => {
      return item.accountId == store.getters.accountId;
    })?.followers || []
  );
});
const gameList = ref([]);
const getSkillColor = (skillType) => {
  const skillColorMap = {
    "Very High": "u-type-warning",
    Hight: "u-content-color",
    Normal: "u-tips-color",
  };
  return skillColorMap[skillType];
};
const getFollowerGameList = async () => {
  for (let accountId of followerList.value) {
    const recentMatches = await getPlayerRecentMatches(accountId);
    const playerInfo = await getPlayers(accountId);
    const _list = recentMatches.slice(0, 2);
    _list.forEach((item) => {
      Object.assign(item, playerInfo.profile);
    });
    gameList.value.push(..._list);
  }
  gameList.value.sort((a, b) => {
    return b.start_time - a.start_time;
  });
};
const handleToMatch = (match_id) => {
  router.push({
    name: "Match",
    params: {
      match_id,
    },
  });
};
onMounted(() => {
  getFollowerGameList();
});
</script>
<style lang="scss" scoped></style>
